<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HomePage</title>
	<style type="text/css">
		a.button{/*定义基本的按钮类样式*/
			display: block;
			float: left;
			position: relative;
			height: 25px;
			width: 80px;
			margin: 0 10px 18px 0;
			text-decoration: none;
			font: 12px "Helvetica Neue",Helvetica,Arial,sans-serif;
			font-weight: bold;/*加粗*/
			line-height: 25px;
			text-align: center;
		}
		/*增加行为样式，实现按钮的动态效果，使用:hover的伪类选择器*/
		/*Gray*/
		.gray,.gray:hover{
			color: #555;
			border-bottom: 4px solid #b2b1b1;
			background: #eee;
		}
		.gray:hover{background: #e2e2e2;}
		/*定义双边样式为按钮定义粗边框的底部效果，增加行间距，使用:before和:after伪类选择器*/
		a.button:before,a.button:after{
			content: '';
			position: absolute;/*绝对定位器，参照浏览器的左上角*/
			left: -1px;/*left的效果取决于position的属性值，当position设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包				含块左边界之间的偏移*/
			height: 25px;
			width: 80px;
			bottom: -1px;
			-webkit-border-radius:3px;/*The -webkit-border-radius property is used in CSS and certain HTML elements. This property only works with web browsers that use WebKit as their layout engine, like Apple's Safari, as it is an Apple CSS Extension. It creates a rounded edge on all corners of the element's box.*/
			-moz-border-radius:3px;
			border-radius: 3px;
		}
		a.button:before{
			height: 23px;
			bottom: -4px;
			border-top: 0;
			-webkit-border-radius:0 0 3px 3px;
			-moz-border-radius:0 0 3px 3px;
			border-radius:0 0 3px 3px;
			-webkit-box-shadow:0 1px 1px 0px #bfbfbf;
			-moz-box-shadow:0 1px 1px 0px #bfbfbf;
			box-shadow: 0 1px 1px 0px #bfbfbf;
		}
		/*借助css3圆角效果，表现按钮的金属特性*/
		a.button{
			-webkit-border-radius:3px;
			-moz-border-radius:3px;
			border-radius: 3px;
		}
		/*定义边框阴影效果*/
		a.button:before,a.button:after{
			-webkit-border-radius:3px;
			-moz-border-radius:3px;
			border-radius: 3px;
		}
		a.button:before{
			-webkit-border-radius:0 0 3px 3px;
			-moz-border-radius:0 0 3px 3px;
			border-radius:0 0 3px 3px;
			-webkit-box-shadow:0 1px 1px 0px #bfbfbf;
			-moz-box-shadow:0 1px 1px 0px #bfbfbf;
			box-shadow: 0 1px 1px 0px #bfbfbf;
		}
		/*定义鼠标经过和访问过按钮伪类状态类样式，设计渐变背景色特效*/
		/*Gray*/
		a.gray,a.gray:hover,a.gray:visited{
			color: #555;
			border-bottom:4px solid #b2b1b1;
			text-shadow:0px 1px 0px #fafafa;
			background:#eee;
			background:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#e2e2e2));
			background:-moz-linear-gradient(top,#eee,#e2e2e2);
			box-shadow: inset 1px 1px 0 #f5f5f5;
		}
		.gray:before,.gray:after{
			border: 1px solid #cbcbcb;
			border-bottom: 1px solid #a5a5a5;
		}
		.gray:hover{
			background: #e2e2e2;
			background: -webkit-gradient(linear,left top,left bottom,from(#e2ee2),to(#eee));
			background: -moz-linear-gradient(top,#e2e2e2,#eee);
		}
		/*利用active伪类选择器定义对象激活下的样式效果*/
		a.button:active{
			border:none;
			bottom: -4px;
			margin-bottom: 22px;
			-webkit-box-shadow:0 1px 1px #fff;
			-moz-box-shadow:0 1px 1px #fff;
			box-shadow:1px 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,0.3);
		}
		a.button:active:before,a.button:active:after{
			border: none;
			-webkit-box-shadow:none;
			-moz-box-shadow:none;
			box-shadow: none;
		}
		h1{
			background-color: #73EFE1;
			color:blue;
			text-align: center;
		}
		body{
			height: 100%;
			width: 100%;
			border: none;
			overflow-x: hidden;
		}
		#links {text-align:center;}
		#links ul{list-style: none;}
		#links ul li{display: inline;}
	</style>
</head>

<body>
	<h1>图书管理系统</h1>
	<div id="links">
		<ul id="container">
		<li><a href="readerinfo.html" class="button gray">加入成员</a></li>
		<li><a href="addbook.html" class="button gray">采购新书</a></li>
		<li><a href="update.html" class="button gray">已有库存++</a></li>
		<li><a href="delete.html" class="button gray">已有库存--</a></li>
		<li><a href="Check.html" class="button gray">借阅</a></li>
		<li><a href="returnbook.html" class="button gray">归还</a></li>
		<li><a href="allbook.php" class="button gray">库存情况</a></li>
		<li><a href="allreader.php" class="button gray">成员情况</a></li>
		<li><a href="Borrowinfo.php" class="button gray">成员借阅情况</a></li>
		<li><a href="addlog.php" class="button gray">库存增加记录</a></li>
		<li><a href="deletelog.php" class="button gray">淘汰记录</a></li>
		</ul>
	</div>
</body>
</html>
